<template>
  <div class="container">
    <el-card>
      <!-- 头部说明 -->
      <div class="header">
        <span>说明:目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="this.$router.push('/questions/new?id=xx')"
          >新增试题</el-button
        >
      </div>
      <!-- form表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-row type="flex" justify="end">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="form.region"
                placeholder="请选择"
                @change="handleChange"
              >
                <el-option
                  v-for="(item, index) in list"
                  :key="index"
                  :label="item.subjectName"
                  :value="item.subjectName"
                ></el-option>
                <!-- <el-option label="区域二" value="beijing"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.directory" placeholder="请选择活动区域">
                <el-option
                  v-for="item in directory"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>

          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tag" placeholder="请选择活动区域">
                <el-option
                  v-for="item in listLabel"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.subjectName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="请选择关键字"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二 -->
        <el-row type="flex" justify="end">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                v-model="form.questionTypes"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择活动区域">
                <el-option
                  v-for="item in difficulty"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>

          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction" placeholder="请选择活动区域">
                <el-option
                  v-for="item in direction"
                  :key="item.id"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                v-model="form.Administrator"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in Administrator"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三 -->
        <el-row type="flex" justify="end">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称"> <el-input></el-input> </el-form-item
          ></el-col>

          <el-col :span="6">
            <el-form-item label="城市">
              <el-row :gutter="0">
                <el-col :span="11">
                  <el-select
                    v-model="form.province"
                    placeholder="请选择活动区域"
                    class="smallselect"
                    @change="ProChange"
                  >
                    <el-option
                      v-for="item in province"
                      :key="item.id"
                      :label="item"
                      :value="item"
                    ></el-option> </el-select
                ></el-col>
                <el-col :span="11" :push="1">
                  <el-select
                    v-model="form.provinceCitys"
                    placeholder="请选择活动区域"
                    class="smallselect"
                    style="margin: 0 0 0 10px"
                  >
                    <el-option
                      v-for="item in provinceCitys"
                      :key="item.id"
                      :label="item"
                      :value="item"
                    ></el-option> </el-select
                ></el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12"
                ><div class="grid-content bg-purple" style="opacity: 0"></div
              ></el-col>
              <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="12">
                <el-form-item style="margin: 0 0 0 4px">
                  <el-button size="small" @click="eliminate">清除</el-button>
                  <el-button size="small" type="primary">搜索</el-button>
                </el-form-item></el-col
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <!-- 列表 -->
      <Eltabpane></Eltabpane>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js' // 学科
import { detail } from '@/api//hmmm/directorys.js' // 二级目录
import { listLabel } from '@/api/hmmm/tags.js' // 标签
import { provinces, citys } from '@/api/hmmm/citys.js' // 城市
import { questionType, difficulty, direction, Administrator } from '@/api/hmmm/constants.js'
import Eltabpane from '../zhaojun/eltabpane.vue' // 全部
export default {
  components: { Eltabpane },
  data() {
    return {
      form: {
        region: '',
        directory: '',
        tag: '',
        keyword: '',
        questionTypes: '',
        difficulty: '',
        direction: '',
        Administrator: '',
        province: '',
        provinceCitys: '' // 区级
      },
      list: [],
      directory: [],
      listLabel: [],
      questionType: [],
      difficulty: [],
      direction: [],
      Administrator: [],
      province: [],
      provinceCitys: []
    }
  },
  created() {
    this.listTag() // 学科
  },
  methods: {
    // 封装请求接口数据
    async listTag() {
      const res = await list() // 学科
      // console.log(res, '学科')
      this.list = res.data.items
    },
    async handleChange() {
      this.$nextTick(async() => {
        // 监听input发生变化
        const { id } = this.list.find(item => item.subjectName === this.form.region)
        // const { id } = datailObj

        // 目录
        const dir = await detail({ id })

        if (this.directory.length !== 0) {
          this.directory = []
        } else {
          this.directory.push(dir.data)
        }
        // 标签
        const Labels = await listLabel({ id })

        this.listLabel = Labels.data.items

        // 试题类型
        this.questionType = questionType

        // 难度选择
        this.difficulty = difficulty

        // 方向选择
        this.direction = direction

        // 管理员选择
        this.Administrator = Administrator

        // 城市选择
        this.province = provinces()
      })
    },
    // 城市改变事件
    ProChange() {
      // 城市选择
      this.province = provinces()

      // 地区选择
      if (this.form.province !== '') {
        this.provinceCitys = citys(this.form.province)
      } else {
        this.provinceCitys = []
      }
    },
    eliminate() {
      this.form = {
        region: '',
        directory: '',
        tag: '',
        keyword: '',
        questionTypes: '',
        difficulty: '',
        direction: '',
        Administrator: '',
        province: '',
        provinceCitys: '' // 区级
      }
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  span {
    font-size: 12px;
    color: pink;
  }
}
// .el-form-item__content {

// }
.el-input--medium .el-input__inner {
  height: 31px !important;
}
.smallselect {
  width: 100% !important;
  // :nth-last-child(2) {
  //   margin: 0 10px 0 10px !important;
  //   background-color: purple !important;
  // }
}
.el-input {
  width: 336px;
  height: 32px !important;
}
.el-select {
  width: 336px;
  height: 32px !important;
}
.el-row {
  // margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
